<script setup>
	// 导入定义好的 Store
	import { onMounted, ref } from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
	} from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'
	import Tabbar from '@/components/TabbarCustom.vue'
	import { useUsercodeStore } from '@/store/usercode.js'

	function toActive(){
		uni.navigateTo({
			url: `/homePage/activity/index`,
		})
	}
	function toShop(){
		uni.navigateTo({
			url: `/homePage/mall/index`,
		})
	}

	function goMerge(){
		uni.navigateTo({
			url: '/mergePage/merge/index',
		})
	}
	
	//商品
	const goodsList = ref()
	const category = ref()
	const info = ref()
	
	async function getInfo() {
		const res = await http.request({
			url: '/api/index/indexData',
			method: 'POST',
			data: {},
		})
		console.log(res)
		info.value = res.data.banner
		category.value = res.data.goods_class
		goodsList.value = res.data.goods
		console.log(goodsList)
		// if (res.data.address_status == 1) {
		// 	uni.utils.toast('背包商品即将自动发货，请填写地址。')
		// 	setTimeout(() => {
		// 		uni.navigateTo({
		// 			url: `/minePage/editaddress/index`,
		// 		})
		// 	}, 2000)
		// }
	}

	const tuiListData = ref([])
	const currentPage = ref(1)
	const canLoadMore = ref(true)
	async function getTui() {
		let params = {page:currentPage.value,limit:10};
		const res = await http.request({
			url: '/api/tui/tuiList',
			method: 'POST',
			data: params,
		})
		console.log(res)
		if (res.st == 1) {
			if (res.data.length < 10) {
				canLoadMore.value = false
			}
			tuiListData.value = [...tuiListData.value, ...res.data]
		}else {
			canLoadMore.value = false
		}
	}

	// 上拉加载
	onReachBottom(() => {
		if(canLoadMore.value){
			currentPage.value++
			getTui()
		}
	})

	async function clearParams(){
		canLoadMore.value = true;
	}

	async function clearData(){
		tuiListData.value = []
		currentPage.value = 1
	}

	onLoad(() => {
		getInfo()
		getTui()
	})

	function gotoDetail(item){
		if (item.type == 1){
			uni.navigateTo({
				url: `/pages/chosen/tianxuan-detail?id=${item.box_id}`,
			})
		}
		if (item.type == 2){
			uni.navigateTo({
				url:"/pages/card/card-detail?id="+item.box_id
			})
		}
		if (item.type == 3){
			uni.navigateTo({
				url: `/pages/bag/lucky-box-center?id=${item.box_id}`,
			})
		}
	}

</script>

<template>
	<Tabbar :current="2"></Tabbar>

	<view>
		<!-- 轮播图 -->
		<uni-swiper-dot
			class="uni-swiper-dot-box"
			@clickItem="clickItem"
			:info="info"
			:current="current"
			:mode="mode"
			:dots-styles="dotsStyles"
			field="content"
		>
			<swiper
				class="swiper-box"
				@change="change"
				:current="swiperDotIndex"
				autoplay="true"
			>
				<swiper-item >
					<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/home/swiper.jpg"
						style="height: 380rpx; width: 710rpx;border-radius: 10rpx;"
					></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<view class="category">
			<view class="category-item" @click="goMerge">
				<image
					src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/home/hecheng.png"
					style="width: 150rpx; height: 150rpx; margin-bottom: 16rpx"
				></image>
				<text>合成法阵</text>
			</view>
			
			<view class="category-item" >
				<image
					src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/home/kapai.png"
					style="width: 150rpx; height: 150rpx; margin-bottom: 16rpx"
				></image>
				<text>卡牌宝典</text>
			</view>
			
			<view class="category-item" @click="toActive">
				<image
					src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/home/active.png"
					style="width: 150rpx; height: 150rpx; margin-bottom: 16rpx"
				></image>
				<text>活动海湾</text>
			</view>
			
			<view class="category-item" @click="toShop">
				<image
					src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/home/shop.png"
					style="width: 150rpx; height: 150rpx; margin-bottom: 16rpx"
				></image>
				<text>神秘商店</text>
			</view>
		</view>
		<!-- 热门../// -->
		<view class="hot-tit">
			<view class="left"> </view>
			<view class="hot">
				<text>热门精选</text>
			</view>
			<view class="right"></view>
		</view>
		<!-- 热门列表 -->
		<view class="active-list">
			<view v-for="(item, index) in tuiListData" :key="index" @click="gotoDetail(item)">
				<image :src="item.img" class="img-list"></image>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	
	
	.uni-swiper-dot-box {
		width: 710rpx;
	}
	.swiper-box {
		width: 710rpx;
		height: 380rpx;
		margin: 0 auto;
	}
	
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 320rpx;
		width: 710rpx;
		color: #fff;
	}
	
	.swiper-item0 {
		background-color: #cee1fd;
	}
	
	.swiper-item1 {
		background-color: #b2cef7;
	}
	
	.swiper-item2 {
		background-color: #cee1fd;
	}
	
	// 商城分类
	.category {
		display: flex;
	flex-direction: inherit;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 26rpx;
		padding: 0 18rpx;
		box-sizing: border-box;
		.category-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text {
				font-size: 24rpx;
			}
		}
	}
	.hot-tit{
		display: flex;
		margin: auto;
		margin-top: 30rpx;
		align-items: center;
		text-align: center;
		justify-content: center;
		margin-bottom: 10rpx;
	}
	.left,.right{
		width:240rpx;
		height: 1rpx;
		background-color: #E0E0E0;
	}
	.hot{
		margin-right: 40rpx;
		margin-left: 40rpx;
		font-size: 32rpx;
		color: #383838;
	}
	.active-list{
		margin: 0rpx auto;
		justify-content: space-evenly;
		flex-wrap: wrap;
		display: flex;
		// width: 96vw;
		padding-bottom: 210rpx;
	
	}
	.img-list{
		width: 360rpx;
		height:240rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
	
	
	
	
	
	
</style>
